<template>
  <div>
    <el-drawer
      v-model="createVisible"
      :with-header="false"
      :append-to-body="true"
      size="1000"
      @close="close"
    >
      <div class="detail-body" v-loading="initLoading">
        <div class="detail-header">
          <div class="flex">
            <el-avatar shape="square" size="large" :src="userDetail.avatar" />
            <div class="ml20">
              <div class="fz16">{{ userDetail.nickName }}</div>
            </div>
          </div>
          <div v-permission="'user-user-recharge_balance'">
            <el-dropdown>
              <el-button link type="primary">充值</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="rechargeBalance"
                      >余额充值</el-dropdown-item
                    >
                    <el-dropdown-item>积分充值</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-row-item">
            <div class="detail-row-item-title">余额</div>
            <div class="detail-row-item-data">
              {{ userDetail.balance }}
            </div>
          </div>
          <div class="detail-row-item">
            <div class="detail-row-item-title">总计订单</div>
            <div class="detail-row-item-data">{{ 0 }}笔</div>
          </div>
          <div class="detail-row-item">
            <div class="detail-row-item-title">总消费金额</div>
            <div class="detail-row-item-data">
              {{ userDetail.order_pay_sum }}元
            </div>
          </div>
          <div class="detail-row-item">
            <div class="detail-row-item-title">积分</div>
            <div class="detail-row-item-data">{{ userDetail.integral }}</div>
          </div>
          <div class="detail-row-item">
            <div class="detail-row-item-title">消费次数</div>
            <div class="detail-row-item-data">{{ userDetail.order_count }}</div>
          </div>
        </div>

        <div>
          <el-tabs v-model="tabActive" @tab-change="tabHandle">
            <el-tab-pane label="用户信息" name="info">
              <div class="detail-cell">
                <div class="detail-cell-head">用户概况</div>
                <div class="detail-cell-list">
                  <div class="detail-cell-item">
                    <span class="text-grey">用户状态：</span>
                    <span :class="`text-${userDetail.status?.color}`">{{
                      userDetail.status?.name
                    }}</span>
                  </div>
                  <div class="detail-cell-item">
                    <span class="text-grey">用户分组：</span>
                    <span v-if="userDetail.group_id">{{
                      userDetail.group_name
                    }}</span>
                    <span v-else class="text-grey">无</span>
                    <el-button
                      link
                      type="primary"
                      size="large"
                      class="ml10 icon icon-tianxie"
                      v-permission="'user-user-update_group'"
                      @click="updateGroup(userDetail.id, userDetail.group_id)"
                    ></el-button>
                  </div>
                  <div class="detail-cell-item">
                    <span class="text-grey">注册来源：</span>
                    <span>{{ userDetail.register_source?.name }}</span>
                  </div>
                  <div class="detail-cell-item">
                    <span class="text-grey">注册时间：</span>
                    <span>{{ userDetail.create_time }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="消费记录" name="order">
              <template v-if="tabActive == 'order'">
                <el-table
                  :data="lists"
                  row-key="id"
                  v-loading="listInitLoading"
                >
                  <el-table-column
                    prop="order_source"
                    label="订单来源"
                    align="center"
                    width="140"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.order_source.name }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="order_no" label="订单号" width="240">
                    <template #default="scope">
                      <div>
                        {{ scope.row.order_no }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="total_num"
                    label="商品数量"
                    align="center"
                    width="120"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.total_num }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="order_total_price"
                    label="订单总金额"
                    align="center"
                    width="120"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.order_total_price }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="pay_time"
                    label="交易完成时间"
                    align="center"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.pay_time }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="余额变动" name="balance">
              <template v-if="tabActive == 'balance'">
                <el-table
                  :data="lists"
                  row-key="id"
                  v-loading="listInitLoading"
                >
                  <el-table-column
                    prop="source"
                    label="变动场景"
                    align="center"
                    width="120"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.source.name }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="money" label="变动金额" width="140">
                    <template #default="scope">
                      <template v-if="scope.row.money > 0">
                        <span class="text-green">+{{ scope.row.money }}</span>
                      </template>
                      <template v-else>
                        <span class="text-red">{{ scope.row.money }}</span>
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="user_balance"
                    label="当前余额(变动前)"
                    width="140"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.user_balance }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="describe" label="描述/说明">
                    <template #default="scope">
                      <div>
                        {{ scope.row.describe }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="create_time" label="时间">
                    <template #default="scope">
                      <span>
                        {{ scope.row.create_time }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="浏览足迹" name="visit">浏览足迹</el-tab-pane>
          </el-tabs>
        </div>
        <template v-if="$utils.inArray(tabActive, ['order', 'balance'])">
          <!-- 分页 -->
          <div class="flex end">
            <page :listPage="listPage" @change="pageChange"></page>
          </div>
        </template>
        <userRechargeBalance
          ref="userRechargeBalanceRef"
          @success="toInit"
        ></userRechargeBalance>
        <userUpdateGroup
          ref="userUpdateGroupRef"
          @success="toInit"
        ></userUpdateGroup>
      </div>
    </el-drawer>
  </div>
</template>
  
<script lang="ts">
export default {
  name: "userDetail",
};
</script>
  
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import { getUserDetail } from "@/api/user/index";
import { getUserWaterList } from "@/api/user/water";
import { getUserOrderList } from "@/api/user/index";

import userRechargeBalance from "./recharge-balance.vue";
import userUpdateGroup from "@/views/user/user/update-group.vue";

import { listPageType, Result, ResultError } from "@/types";
import { useConfig } from "@/store";

const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["close"]);

const createVisible = ref<boolean>(false);

const operationId = ref<number>(0);

const initLoading = ref<boolean>(true);

const userDetail = ref<any>({});

const tabActive = ref<string>("info");

const tabHandle = (val: string, isInit: boolean = true) => {
  if (isInit) {
    listPage.value.page = 1;
    listPage.value.total = 0;
  }
  switch (val) {
    case "balance":
      toInitBalance();
      break;
    case "order":
      toInitOrder();
      break;
  }
  tabActive.value = val;
};

const toInit = () => {
  initLoading.value = true;
  getUserDetail({
    id: operationId.value,
  })
    .then((res: Result) => {
      userDetail.value = res.data;
      setTimeout(() => {
        initLoading.value = false;
      }, 1000);
    })
    .catch((err: ResultError) => {});
};

const lists = ref<any>([]);

const listInitLoading = ref<boolean>(false);

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  tabHandle(tabActive.value, false);
};

const userRechargeBalanceRef = ref<HTMLElement>();

// 充值余额
const rechargeBalance = () => {
  proxy?.$refs["userRechargeBalanceRef"]?.open(
    userDetail.value.id,
    userDetail.value.balance
  );
};

// 获取余额变动数据
const toInitBalance = () => {
  listInitLoading.value = true;
  getUserWaterList({
    page: listPage.value.page,
    limit: listPage.value.limit,
    id: operationId.value,
  })
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.value.total = res.data.total;
      listInitLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

// 获取消费记录
const toInitOrder = () => {
  listInitLoading.value = true;
  getUserOrderList({
    page: listPage.value.page,
    limit: listPage.value.limit,
    id: operationId.value,
  })
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.value.total = res.data.total;
      listInitLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const userUpdateGroupRef = ref<HTMLElement>();

// 设置分组
const updateGroup = (id: number, groupId: number) => {
  proxy?.$refs["userUpdateGroupRef"].open(id, groupId);
};

const open = (id: number = 0, groupId: number = 0) => {
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
  createVisible.value = true;
};

const close = () => {
  emit("close");
};

defineExpose({ open });
</script>
  
  <style scoped>
.detail-header {
  display: flex;
  justify-content: space-between;
}
.detail-row {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.detail-row-item {
  width: 20%;
}
.detail-row-item-title {
  color: #666;
}

.detail-row-item-data {
  font-size: 16px;
  margin-top: 10px;
}

.detail-cell {
}
.detail-cell-head {
  position: relative;
  margin-left: 12px;
  height: 30px;
  font-weight: bold;
  line-height: 30px;
}
.detail-cell-head::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 12px;
  left: -12px;
  top: calc(50% - 6px);
  background: var(--base-default);
}
.detail-cell-list {
  display: flex;
  flex-wrap: wrap;
}
.detail-cell-item {
  width: calc(100% / 3);
  margin-top: 10px;
}
</style>